<template>
    <div class="region-wrap">
        <el-select
            v-model="province"
            @change="regionChange('province', '2')"
            clearable
            :disabled="disabled"
            placeholder="请选择省"
        >
            <el-option
                v-for="item in regionArr1"
                :key="item.xzqbm"
                :label="item.name"
                :value="item.xzqbm"
            ></el-option>
        </el-select>
        <el-select
            v-model="city"
            @change="regionChange('city', '3')"
            clearable
            :disabled="disabled"
            placeholder="请选择市"
        >
            <el-option
                v-for="item in regionArr2"
                :key="item.xzqbm"
                :label="item.name"
                :value="item.xzqbm"
            ></el-option>
        </el-select>
        <el-select
            v-model="county"
            @change="regionChange('', '3')"
            clearable
            :disabled="disabled"
            placeholder="请选择县"
        >
            <el-option
                v-for="item in regionArr3"
                :key="item.xzqbm"
                :label="item.name"
                :value="item.xzqbm"
            ></el-option>
        </el-select>
    </div>
</template>
<script>
import { queryRegion, queryPlace } from '@/service/getRegion';
export default {
    name: 'regionPanel',
    props: {
        disabled: {
            type: Boolean,
            require: true,
        },
    },
    data() {
        return {
            regionArr1: [],
            regionArr2: [],
            regionArr3: [],
            province: '',
            city: '',
            county: '',
            geom: null,
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.initRegion();
        });
    },
    methods: {
        // 初始化行政区，查询省
        async initRegion() {
            let resData = await queryRegion({ level: '1', xzqbm: '' });
            if (resData.status === 200) {
                this.regionArr1 = resData.data;
            }
        },
        // 根据选择的行政区绘制区域
        async regionChange(name, level) {
            this.$parent.drawFun.deleteArea();
            await this.getRange();
            if (name) {
                let resData = await queryRegion({
                    level,
                    xzqbm: this[name],
                });
                if (resData.status === 200) {
                    this[`regionArr${level}`] = resData.data
                        ? resData.data
                        : [];
                }
            }
        },
        async getRange() {
            if (!this.province) {
                return;
            }
            let resData = this.county
                ? await queryPlace(this.county)
                : this.city
                ? await queryPlace(this.city)
                : await queryPlace(this.province);
            if (resData.status === 200) {
                this.geom = {
                    type: 'FeatureCollection',
                    features: [
                        {
                            type: 'Feature',
                            geometry: JSON.parse(resData.data.geom).geometry,
                        },
                    ],
                };
                this.$parent.drawFun.createAdministrativeDivisions({
                    jsonObject: this.geom,
                });
            }
        },
    },
};
</script>
<style lang="scss" scope>
@import 'theme/css/funGroupStyle.scss';
.region-wrap {
    display: flex;
}
</style>
<style lang="scss">
.region-wrap {
    .el-select {
        .el-input__inner {
            color: #fff;
        }
    }
}
</style>
